<template>
	<view @click="close" class="goodsDetail-container" :style="{ 'padding-bottom': pb }">
		<!-- 商品图片展示区域 -->
		<view class="goods-pic-box">
			<swiper @change="goodsPicChange" class="goods-pic-box-swiper">
				<swiper-item v-for="(item, index) in goodsDetail.carouselImg" :key="index">
					<image :src="item" style="width: 100%; height: 100%"></image>
				</swiper-item>
			</swiper>

			<!-- 更多 -->
			<view class="goods-pic-box-more-box">
				<image @click.stop="toggleMenu" src="@/static/common/more-icon.png" class="goods-pic-box-more"></image>
				<view class="goods-pic-box-more-box-menu" :class="{ 'goods-pic-box-more-box-menu-open': openMenu }">
					<view @click="goHome" class="goods-pic-box-more-box-menu-item">
						<image src="@/static/common/menu-home-icon.png" class="goods-pic-box-more-box-menu-item-icon"></image>
						<text>首页</text>
					</view>
					<view @click="goMy" class="goods-pic-box-more-box-menu-item">
						<image src="@/static/common/menu-my-icon.png" class="goods-pic-box-more-box-menu-item-icon"></image>
						<text>我的</text>
					</view>
					<view @click="toShare" class="goods-pic-box-more-box-menu-item">
						<image src="@/static/common/menu-share-icon.png" class="goods-pic-box-more-box-menu-item-icon"></image>
						<text>分享</text>
					</view>
				</view>
			</view>

			<!-- 轮播图序号 -->
			<view class="goods-pic-box-swiper-indexBox">{{ goodsPicIndex }}/{{ goodsDetail?.carouselImg?.length }}</view>
		</view>

		<!-- 商品信息区域 -->
		<view class="goods-info-box">
			<!-- 商品价格以及名称区域 -->
			<view class="goods-price-name-box">
				<view class="goods-price-name-box-top">
					<view class="goods-price-name-box-top-left">
						<view class="goods-price-name-box-price">
							<view class="goods-price-name-box-price-new">
								<text class="goods-price-name-box-price-unit">￥</text>
								<text class="goods-price-name-box-price-text">{{ goodsDetail.offerPrice }}</text>
							</view>
							<view class="goods-price-name-box-price-old">
								<text class="goods-price-name-box-price-unit">￥</text>
								<text class="goods-price-name-box-price-text">{{ goodsDetail.price }}</text>
							</view>
						</view>
					</view>
					<view class="goods-price-name-box-top-right">{{ goodsDetail.sales }}人已购</view>
				</view>
				<view class="goods-price-name-box-bottom">
					<view class="goods-price-name-box-bottom-name">
						<text class="goods-price-name-box-bottom-platform">{{ goodsDetail.platformName }}</text>
						<text class="goods-price-name-box-bottom-text">{{ goodsDetail.goodsName }}</text>
					</view>
				</view>
			</view>

			<!-- 商品优惠券 -->
			<view v-if="goodsDetail?.coupons" class="goods-coupon">
				<view class="goods-coupon-box">
					<view class="goods-coupon-box-left">
						<view class="goods-coupon-box-left-unit">￥</view>
						<view class="goods-coupon-box-left-text">{{ goodsDetail?.coupons?.couponAmount }}</view>
					</view>
					<view class="goods-coupon-box-center">
						<view class="goods-coupon-box-center-text goods-coupon-box-center-text-title">{{ goodsDetail?.coupons?.couponTitle }}</view>
						<view class="goods-coupon-box-center-text">{{ goodsDetail?.coupons?.couponDesc }}</view>
						<view class="goods-coupon-box-center-text">{{ goodsDetail?.coupons?.couponStartTime }}-{{ goodsDetail?.coupons?.couponEndTime }}</view>
					</view>
					<view class="goods-coupon-box-right">免费领取</view>
				</view>
			</view>

			<!-- 商品店铺 -->
			<view class="goods-store">
				<image src="@/static/common/store-icon.png" class="goods-store-left"></image>
				<view class="goods-store-center">
					<view class="goods-store-center-storeName">{{ goodsDetail.storeName }}</view>
					<view class="goods-store-center-platform">{{ goodsDetail.platformName }}</view>
				</view>
				<view v-if="false" class="goods-store-right">进店逛逛</view>
			</view>

			<!-- 商品详情 -->
			<view class="goods-detail">
				<view class="goods-detail-title">
					<view class="goods-detail-title-text">宝贝详情</view>
					<view @click="showGoodsDetailFun" class="goods-detail-title-more" :class="{ 'goods-detail-title-more-open': showGoodsDetail }">
						<text class="goods-detail-title-more-text">点击查看</text>
					</view>
				</view>
				<!-- 商品详情图列表 -->
				<view v-if="showGoodsDetail" class="goods-detail-pic-list">
					<image v-for="(item, index) in goodsDetail.contentImg" :key="index" :src="item" mode="widthFix" class="goods-detail-pic-list-item"></image>
				</view>
			</view>
		</view>

		<!-- 相似推荐 -->
		<view class="suggest-gap">相似推荐</view>

		<!-- 商品列表区域 -->
		<view class="goods-list-box">
			<goodsListCom :goods-list="goodsList" />

			<!-- 列表加载 -->
			<u-loadmore :status="LoadingStatus" />
		</view>
	</view>

	<!-- 底部操作栏 -->
	<view class="footer-func-box" :style="{ 'padding-bottom': safeBottom + 'px' }">
		<view @click="collectGoodsFun" class="footer-func-item">
			<image v-if="goodsDetail.collectState" src="@/static/common/star-ac-icon.png" class="footer-func-item-icon"></image>
			<image v-else src="@/static/common/star-icon.png" class="footer-func-item-icon"></image>
			<text class="footer-func-item-text">收藏</text>
		</view>
		<view @click="copyShareLink" class="footer-func-item">
			<image src="@/static/common/copy-icon2.png" class="footer-func-item-icon"></image>
			<text class="footer-func-item-text">复制{{ goodsDetail.supportPwd ? '口令' : '链接' }}</text>
		</view>
		<view class="footer-func-btn-box">
			<view @click="toShare" class="footer-func-btn-box-left btn">
				<text>分享赚</text>
				<text>￥{{ goodsDetail.rebatesAmount }}</text>
			</view>
			<view @click="toBuy" class="footer-func-btn-box-right btn">
				<text>下单省</text>
				<text>￥{{ goodsDetail.buyEconomizeAmount }}</text>
			</view>

			<!-- 对话框提示语 -->
			<view v-if="goodsDetail.commissionDesc" class="footer-func-box-tips">
				<text>{{ goodsDetail.commissionDesc }}</text>
				<image src="@/static/common/tips-bottom-icon.png" class="tipsIcon"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { onReachBottom } from '@dcloudio/uni-app';
import goodsListCom from '@/components/goodsList/index.vue';
import { getGoodsDetail, getSimilarGoodsList, getGoodsSharePwd, collectGoods, cancelCollectGoods, pddAuth } from '@/api/home.js';
import common from '@/utils/common';
import { useUserStore } from '@/store/userStore.js';

const userStore = useUserStore();

onLoad((options) => {
	goodsId.value = options.goodsId;
	platform.value = options.platform;
});

const safeBottom = ref(0);
const pb = ref('12px');
onMounted(() => {
	// 获取底部安全区域
	uni.getSystemInfo({
		success: (res) => {
			safeBottom.value = res.safeAreaInsets.bottom ? res.safeAreaInsets.bottom : 12;
		}
	});
	// 获取底部操作栏高度
	uni.$u.getRect('.footer-func-box').then((res) => {
		console.log(res);
		pb.value = res.height + 36 + 'px';
	});

	getGoodsDetailFun();
});

// 获取商品详情
const goodsDetail = ref({});
const goodsId = ref('');
const platform = ref('');
const getGoodsDetailFun = async () => {
	let res = await getGoodsDetail({
		goodsId: goodsId.value,
		platform: platform.value
	});
	if (res.code == 0) {
		goodsDetail.value = res.data;

		getSimilarGoodsListFun();
	}
};

// 获取相似推荐商品列表
const goodsList = ref([]);
const pageSize = ref('10');
const pageNum = ref('1');
const total = ref('0');
const LoadingStatus = ref('loadmore');
const getSimilarGoodsListFun = async () => {
	LoadingStatus.value = 'loading';

	let res = await getSimilarGoodsList({
		pageNum: pageNum.value,
		pageSize: pageSize.value,
		platform: goodsDetail.value.platform,
		goodsId: goodsDetail.value.goodsId,
		type: 1
	});

	if (res.code == 0) {
		if (goodsList.value.length == res.data.total || res.data.total == 0) {
			LoadingStatus.value = 'nomore';
			return;
		}

		total.value = res.data.total;
		if (res.data.rows.length > 0) {
			goodsList.value = [...goodsList.value, ...res.data.rows];

			pageNum.value++;

			if (goodsList.value.length == res.data.total) {
				LoadingStatus.value = 'nomore';
			}
		}
		console.log('goodsList.value', goodsList.value);
	}
};

// 商品轮播图切换
const goodsPicIndex = ref(1);
const goodsPicChange = (e) => {
	console.log(e);
	goodsPicIndex.value = e.detail.current + 1;
};

// 控制顶部更多菜单显示
const openMenu = ref(false);
const toggleMenu = () => {
	openMenu.value = !openMenu.value;
};
const close = () => {
	if (openMenu.value) {
		openMenu.value = false;
	}
};

// 展开商品详情
const showGoodsDetail = ref(false);
const showGoodsDetailFun = () => {
	showGoodsDetail.value = !showGoodsDetail.value;
};

// 分享
const toShare = () => {
	isLogin();
	
	uni.navigateTo({
		url: `/subPages/goodsShare/index?goodsId=${goodsDetail.value.goodsId}&platform=${goodsDetail.value.platform}`
	});
};

// 复制口令
const copyShareLink = async () => {
	isLogin();
	
	uni.showLoading({
		mask: true
	});
	let res = await getGoodsSharePwd({
		goodsId: goodsDetail.value.goodsId,
		platform: goodsDetail.value.platform,
		weApp: true,
		hasShareText: true,
	});

	uni.hideLoading();
	console.log('复制接口参数：', res);
	if (res.code == 0) {
		uni.setClipboardData({
			data: res.data.shortLink,
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'success',
					duration: 1000
				});
			},
			fail: () => {
				uni.showToast({
					title: '复制失败',
					icon: 'error',
					duration: 1000
				});
			}
		});
	}
};

// 下单省
const toBuy = async () => {
	isLogin();
	
	uni.showLoading({
		mask: true
	});
	let res = await getGoodsSharePwd({
		goodsId: goodsDetail.value.goodsId,
		platform: goodsDetail.value.platform,
		weApp: true,
		hasShareText: true,
	});
	
	uni.hideLoading();
	console.log('下单省接口参数：', res);
	
	common.jumpMiiniP(res, goodsDetail.value.platformName);
};

// 收藏商品
const collectGoodsFun = async () => {
	isLogin();
	
	// if (!goodsDetail.value.collectState) {
	let res = await collectGoods({
		itemId: goodsDetail.value.goodsId,
		platform: goodsDetail.value.platform,
		itemJson: JSON.stringify(goodsDetail.value)
	});

	if (res.code == 0) {
		uni.showToast({
			title: '收藏成功',
			icon: 'none'
		});

		goodsDetail.value.collectState = true;
	}
	// } else {
	// 	cancelCollectGoodsFun();
	// }
};

// 取消收藏
// const cancelCollectGoodsFun = async () => {
// 	let res = await cancelCollectGoods({
// 		ids: [goodsDetail.value.id]
// 	});

// 	if (res.code == 0) {
// 		uni.showToast({
// 			title: '取消收藏成功',
// 			icon: 'none'
// 		});

// 		goodsDetail.value.collectState = false;
// 	}
// };

const goHome = () => {
	uni.switchTab({
		url: '/pages/home/index'
	});
};

const goMy = () => {
	uni.switchTab({
		url: '/pages/my/my'
	});
};

// 判断登录
const isLogin = () => {
	if (!userStore.access_token) {
		uni.navigateTo({
			url: '/subPages/login/index'
		})
		
		throw new Error('去登录！！！')
	};
}

onReachBottom(() => {
	getSimilarGoodsListFun();
});
</script>

<style lang="scss">
.goodsDetail-container {
	min-height: 100vh;
	background-color: #f9f9f9;

	.goods-pic-box {
		position: relative;
		height: 375px;
		background-color: #fff;

		.goods-pic-box-swiper {
			height: 100%;
		}

		.goods-pic-box-more-box {
			position: fixed;
			right: 12px;
			top: 12px;
			z-index: 999;

			.goods-pic-box-more {
				width: 26px;
				height: 26px;
			}

			.goods-pic-box-more-box-menu {
				position: absolute;
				top: 38px;
				right: 0;
				padding: 8px 12px;
				border-radius: 12px;
				background-color: #fff;
				display: none;
				box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.09);

				.goods-pic-box-more-box-menu-item {
					display: flex;
					gap: 6px;
					align-items: center;
					justify-content: space-between;
					padding: 8px 0;
					font-size: 14px;
					white-space: nowrap;
					border-bottom: 1px solid #e1e1e1;

					&:last-child {
						border-bottom: none;
					}

					.goods-pic-box-more-box-menu-item-icon {
						width: 22px;
						height: 22px;
					}
				}
			}

			.goods-pic-box-more-box-menu-open {
				display: block;
			}
		}

		.goods-pic-box-swiper-indexBox {
			position: absolute;
			right: 12px;
			bottom: 12px;
			color: #fff;
			font-size: 10px;
			padding: 2px 6px;
			border-radius: 10px;
			background-color: rgba(0, 0, 0, 0.2);
		}
	}

	.goods-info-box {
		padding: 12px;

		.goods-price-name-box {
			padding: 12px;
			border-radius: 12px;
			background-color: #fff;
			margin-bottom: 12px;

			.goods-price-name-box-top {
				display: flex;
				align-items: baseline;
				justify-content: space-between;
				margin-bottom: 10px;

				.goods-price-name-box-top-left {
					.goods-price-name-box-price {
						display: flex;
						align-items: baseline;
						color: #ff0309;

						.goods-price-name-box-price-new {
							margin-right: 6px;

							.goods-price-name-box-price-unit {
								font-size: 14px;
								font-weight: 400;
							}

							.goods-price-name-box-price-text {
								font-size: 20px;
								font-weight: 600;
							}
						}

						.goods-price-name-box-price-old {
							position: relative;
							color: #999;
							font-size: 12px;

							&::after {
								content: '';
								display: block;
								width: calc(100% + 1px);
								height: 1px;
								background-color: #999;
								position: absolute;
								left: 0;
								top: 60%;
							}
						}
					}
				}

				.goods-price-name-box-top-right {
					color: #999;
					font-size: 12px;
					font-weight: 400;
				}
			}
			.goods-price-name-box-bottom {
				display: flex;
				align-items: center;

				.goods-price-name-box-bottom-name {
					font-size: 14px;
					font-weight: 500;

					.goods-price-name-box-bottom-platform {
						position: relative;
						top: -2px;
						flex: 1;
						color: #fff;
						font-size: 8px;
						font-weight: 400;
						line-height: 10px;
						padding: 1px 5px;
						border-radius: 3px;
						margin-right: 6px;
						white-space: nowrap;
						background: linear-gradient(101.54deg, #ff0309 -3.19%, #ff6a2a 96.1%);
					}

					.goods-price-name-box-bottom-text {
						line-height: 20px;
					}
				}
			}
		}

		.goods-coupon {
			padding: 12px;
			border-radius: 8px;
			background-color: #fff;
			margin-bottom: 12px;

			.goods-coupon-box {
				position: relative;
				display: flex;
				align-items: center;
				padding: 12px;
				border-radius: 8px;
				background-color: rgba(255, 245, 246, 1);

				.goods-coupon-box-left {
					display: flex;
					align-items: baseline;
					color: #ff0309;
					margin-right: 10px;

					.goods-coupon-box-left-unit {
						font-size: 14px;
						font-weight: 400;
					}

					.goods-coupon-box-left-text {
						font-size: 24px;
						font-weight: 600;
					}
				}

				.goods-coupon-box-center {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					gap: 6px;
					max-width: 50%;

					.goods-coupon-box-center-text {
						color: #999;
						font-size: 10px;
						font-weight: 400;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.goods-coupon-box-center-text-title {
						color: #ff0309;
						font-size: 12px;
						font-weight: 500;
					}
				}

				.goods-coupon-box-right {
					position: absolute;
					top: 50%;
					right: 12px;
					transform: translateY(-50%);
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 12px;
					font-weight: 400;
					color: #fff;
					width: 64px;
					height: 24px;
					border-radius: 15px;
					background-color: #ff0309;
				}
			}
		}

		.goods-store {
			position: relative;
			display: flex;
			align-items: center;
			padding: 12px;
			border-radius: 8px;
			background-color: #fff;
			margin-bottom: 12px;

			.goods-store-left {
				width: 21px;
				height: 19px;
				margin-right: 12px;
			}

			.goods-store-center {
				display: flex;
				align-items: center;
				max-width: 70%;

				.goods-store-center-storeName {
					font-size: 14px;
					font-weight: 500;
					margin-right: 8px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.goods-store-center-platform {
					color: #fff;
					font-size: 8px;
					font-weight: 400;
					line-height: 10px;
					padding: 1px 5px;
					border-radius: 3px;
					white-space: nowrap;
					background: linear-gradient(101.54deg, #ff0309 -3.19%, #ff6a2a 96.1%);
				}
			}

			.goods-store-right {
				position: absolute;
				top: 50%;
				right: 12px;
				transform: translateY(-50%);
				display: flex;
				align-items: center;
				justify-content: center;
				color: #ff0309;
				font-size: 12px;
				font-weight: 500;
				padding: 2px 8px;
				border-radius: 15px;
				background-color: rgba(255, 61, 59, 0.1);
			}
		}

		.goods-detail {
			border-radius: 12px;
			background-color: #fff;

			.goods-detail-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 14px 12px;

				.goods-detail-title-text {
					font-size: 14px;
					font-weight: 500;
				}

				.goods-detail-title-more {
					display: flex;
					align-items: center;
					position: relative;
					color: #ff0309;
					font-size: 12px;
					font-weight: 500;

					.goods-detail-title-more-text {
						margin-right: 8px;
					}

					&::after {
						content: '';
						position: relative;
						top: -1px;
						display: inline-block;
						width: 6px;
						height: 6px;
						border-top: 1px solid #ff0309;
						border-right: 1px solid #ff0309;
						transform-origin: center center;
						transform: rotate(135deg);
					}
				}

				.goods-detail-title-more-open {
					&::after {
						top: 3px;
						transform: rotate(-45deg);
					}
				}
			}

			.goods-detail-pic-list {
				display: flex;
				flex-direction: column;

				.goods-detail-pic-list-item {
					width: 100%;
				}
			}
		}
	}

	.suggest-gap {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ff0309;
		font-size: 12px;
		font-weight: 500;
		margin-bottom: 12px;

		&::before {
			content: '';
			display: inline-block;
			width: 20px;
			height: 1px;
			margin-right: 10px;
			background-color: #ff0309;
		}

		&::after {
			content: '';
			display: inline-block;
			width: 20px;
			height: 1px;
			margin-left: 10px;
			background-color: #ff0309;
		}
	}

	.goods-list-box {
		padding: 0 12px;
	}
}

.footer-func-box {
	position: fixed;
	left: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 60px;
	padding: 12px;
	z-index: 9999;
	background-color: #fff;
	box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, 0.12);

	.footer-func-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-right: 6px;

		&:last-child {
			margin-right: 12px;
		}

		.footer-func-item-icon {
			width: 22px;
			height: 22px;
			margin-bottom: 2px;
		}

		.footer-func-item-text {
			font-size: 10px;
			font-weight: 400;
			line-height: 16px;
		}
	}

	.footer-func-btn-box {
		position: relative;
		flex: 1;
		display: flex;
		height: 44px;
		border-radius: 10px;

		.btn {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 14px;
			font-weight: 500;
			height: 100%;
		}

		.footer-func-btn-box-left {
			border-radius: 10px 0 0 10px;
			background: linear-gradient(51.35deg, #ffa20c 10.25%, #ffa947 80.97%);
		}

		.footer-func-btn-box-right {
			border-radius: 0 10px 10px 0;
			background: linear-gradient(42.11deg, #ff0c1b 0%, #ff474f 100%);
		}

		.footer-func-box-tips {
			position: absolute;
			top: -35px;
			right: 0;
			padding: 4px 10px;
			font-size: 12px;
			font-weight: 400;
			line-height: 14px;
			text-align: center;
			border-radius: 22px;
			border: 1px solid #ff0309;
			background-color: #feeeed;

			.tipsIcon {
				position: absolute;
				right: 20px;
				bottom: 0;
				transform: translateY(100%);
				width: 20px;
				height: 4px;
			}
		}
	}
}
</style>